<template>
  <div class="content">
     <div class="app-searchTop">
        <div class="app-searchTop_back" @click="backSearch">
          返回
        </div>
        <div class="app-searchTop_search">
          <input type="text" v-model="msg"/>
        </div>
        <div class="app-searchTop_title" @click="displayUsage">
          <img src="./icons/3.png" alt="#" v-if="isDisplayUsage">
          <img src="./icons/2.png" alt="#" v-else>
        </div>
       <div class="app-menu">
          <span v-for="(val, key) in menu" :key="key">{{val}}</span>
        </div>
     </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'searchDetails',
  data() {
    return {
      msg: '',
      menu: ['综合', '销量', '价格', '筛选'],
      isDisplayUsage: true,
    };
  },
  methods: {
    backSearch() {
      this.$router.push({ path: '/search', query: { msg: this.msg } });
    },
    displayUsage() {
      this.isDisplayUsage = !this.isDisplayUsage;
      if (this.isDisplayUsage) {
        this.$router.push({ path: '/vertical' });
      } else {
        this.$router.push({ path: '/crosswise' });
      }
    },
  },
  created() {
    this.msg = this.$route.query.msg;
    this.$router.push({ path: '/vertical' });
  },
};
</script>

<style scoped lang="scss">
  .content {
    width: 100vw;
    height: 100vh;
    padding-top: 28.12903vw;
    box-sizing: border-box;
    background: #F7F7F7;
    .app-searchTop {
      padding-top: 30px;
      box-sizing: border-box;
      background: white;
      width: 100vw;
      font-size: 0;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      div {
        font-size: 40px;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
      }
      .app-searchTop_back {
        width: 130px;
        height: inherit;
      }
      .app-searchTop_search {
        width: 902px;
        line-height: 123px;
        border: none;
        background: #f2f2f2;
        border-radius: 45px;
        input {
          width: 902px;
          line-height: 123px;
          border: none;
          border-radius: 45px;
          text-indent: 116px;
          background: url("./icons/query.png") no-repeat 3.80645vw 2.80645vw;
          background-size: 52px;
          color: #666666;
        }
      }
      .app-searchTop_title {
        width: 15.93548vw;
        font-size: 56px;
        font-weight: bolder;
        img{
          position: relative;
          top: 1.645vw;
          width: 70px;
          height: 70px;
        }
      }
      .app-menu{
        margin-top: 15px;
        width: 100vw;
        line-height: 134px;
        font-size: 0;
        border-bottom: 2px solid #e6e6e6;
        span{
          display: inline-block;
          width: 25%;
          font-size: 50px;
          text-align: center;
        }
      }
    }
  }
</style>
